<template>
  <el-card>
    <div slot="header" style="background-color: #FFFFF0;display: flex;justify-content: center;padding: 0;">
      <el-card style="height: 100%;width: 80%;margin: 50px 0 50px 0">
        <el-form label-position="left" :model="formInline" class="form">
          <el-form-item label="景点名称">
            <el-select v-model="formInline.region" placeholder="活动区域" style="width: 100%">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="旅游评价">
            <el-rate v-model="formInline.value" style="padding-top: 10px"></el-rate>
          </el-form-item>
          <el-form-item label="景点留言">
            <el-input type="textarea" maxlength="120" show-word-limit :autosize="{ minRows: 2, maxRows: 4}"
                      v-model="formInline.info" placeholder="旅游感悟"></el-input>
          </el-form-item>
          <el-form-item style="display: flex;flex-direction: row;justify-content: center">
            <el-button type="danger" @click="onSubmit" style="margin-top: 20px">我要留言</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

<!--    <div style="display: flex;justify-content: center;padding: 0;overflow: auto" v-for="(index,item) in returnForm" :key="index">-->
<!--      <liu-yan>{{item}}</liu-yan>-->
<!--    </div>-->

    <el-carousel :interval="4000" height="400px" type="card" indicator-position="none">
      <el-carousel-item v-for="item in returnForm.length" :key="item">
        <h3 class="medium">
          <liu-yan></liu-yan>
        </h3>
      </el-carousel-item>
    </el-carousel>

  </el-card>
</template>

<script>
import LiuYan from "@/components/LiuYan";
export default {
  name: "LiuYanBan",
  components: {LiuYan},
  data() {
    return {
      formInline: {
        info: '',
        region: '',
        value : null
      },
      returnForm: [{
        info: '西电',
        region: '西电',
        value: 3,
        time: Date()
      },{
        info: '西电',
        region: '西电',
        value: 3,
        time: Date()
      },{
        info: '西电',
        region: '西电',
        value: 3,
        time: Date()
      },{
        info: '西电',
        region: '西电',
        value: 3,
        time: Date()
      }]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }

}
</script>

<style scoped>
.el-card {
  width: 60%;
}
.el-form-item {
  margin-bottom: 0;
}
.form {
  width: 100%;
}
.el-card__header {
  padding: 0 !important;
  background-color: red;
}
</style>